<!DOCTYPE html>
<html lang="zh">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <link href="css/style.css" rel="stylesheet">
    <script src="./js/xlib.js"></script>

    <script>
      let globle=
      {
        trainingSet : null,
        trainingInfo : null,
        requestCount : 0
      }
      function func1(arr, label)
      {
        //第一步 整理数组
        arr = arr.map(item=>[...item]);
        //第二步 统计每行 1 的个数
        let rowCount= arr.map(item=>item.filter(i=> i === '1').length);
        //第三步 数据转置
        let arrTranspose = Transpose(arr);
        //第四步 统计每列 1 的个数
        let colCount = arrTranspose.map(item=>item.filter(i=> i === '1').length);
        //第五步 分别计算x方向，y方向加权和
        let xWeigthValue = colCount.reduce((sum, cur, index)=>
        {
          sum+= (cur*(index+1));
          return(sum);
        }, 0);
        let yWeigthValue = rowCount.reduce((sum, cur, index)=>
        {
          sum+= (cur*(index+1));
          return(sum);
        }, 0);
        globle.trainingSet.push({features:[xWeigthValue, yWeigthValue], label});
      }

      function func2(arr)
      {
        arr = arr.map(item=> item.replace(".txt", ""));
        globle.trainingInfo = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].map(item=>
          arr.filter(obj=> obj.split('_')[0] === item).length);
        exampleFormControlTextarea1.value = globle.trainingInfo;
      }
    </script>
  </head>
  <body>
    <div class="bd slide">
        Column
    </div>
    <div class="bd main">
      <form class="form-group" id="getList">
        <input type="submit" class="form-control btn btn-primary" id="exampleFormControlInput1"  value="获取训练集名称">
        <textarea class="form-control" id="exampleFormControlTextarea1" rows = "1"></textarea>
      </form>
      
      <form class="form-group" id="getInstances">
        <div class="form-group">
          <label for="tbNumber">Number</label>
          <input type="text" class="form-control" id="tbNumber" value="0">
        </div>
        <div class="form-group">
          <label for="tbParam">Param</label>
          <input type="text" class="form-control" id="tbParam" value="0">
        </div>
        <input type="submit" class="form-control btn btn-secondary" value="获取训练实例" >
        <div class="progress">
          <div id="proGGGG" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </form>
    </div>  
    <script>
      getList.onsubmit = function(event)
      {
        event.preventDefault();
        fetch('http://localhost:5000/testApi/WeatherForecast/GetFileNames')
        .then(response=>response.json())
        .then(myJson=> func2(myJson));
      }
      getInstances.onsubmit = function(event)
      {
        event.preventDefault();

        window.proGGGG.classList.value = 'progress-bar  progress-bar-striped'
        if(globle.trainingInfo === null || globle.trainingInfo === undefined)
        {
          alert("训练集信息不明确");
          return;
        }
        globle.trainingSet = [];
        globle.requestCount = globle.trainingInfo.reduce((sum, item)=> sum+=item, 0);
        let count = 0;
        globle.trainingInfo.forEach(async (item, index)=>
        {
          for(let i=0; i<item; i++)
          {
            await fetch(`http://localhost:5000/testApi/WeatherForecast/GetFileNamesByNumberAndParam?number=${index}&param=${i}`)
              .then(response=>
              {
                count++;
                let per = count*100/globle.requestCount;
                {
                  per = window.parseInt(per);
                  per = `${per}%`;
                }
                window.proGGGG.style.width = per;
                return(response.json());
              })
              .then(myJson=> 
              {
                func1(myJson, index);
                if(count >= globle.requestCount)
                {
                  if(globle.trainingSet === null || globle.trainingSet === undefined)
                  {
                    alert("训练集未加载");
                    return;
                  }
                  let arr = globle.trainingSet.map(item=> item.features);
                  let normalParam = CreateNormalParam(arr);
                  globle.trainingSet.forEach((item, index)=>
                  {
                    globle.trainingSet[index].features = 
                      item.features.map((obj, i)=>
                      {
                        let param = normalParam[i];
                        return((obj-param.min)/param.range);
                      });
                  });
                  window.proGGGG.classList.value = 'progress-bar';
                  console.log(globle.trainingSet);
                }
              });
          }
        });
      }
    </script>  
  </body>
</html>


